import React, { useCallback } from 'react'
import { useDispatch, useSelector } from 'react-redux'
// import React, { Component } from 'react'
// import { connect } from 'react-redux'

import { Switch, NavBar } from 'antd-mobile'
import { actionCreator } from '@/home/index'
import { MoreWrap, TitleBar } from './styledMore'

/*
@connect(
  state => ({
    checked: state.home.checked
  }),
  dispatch => ({
    handleChange(checked) {
      dispatch(actionCreator.changeSwitch(checked))
      // 本地存储：将checked存起来
      localStorage.setItem('checked', checked)
    }
  })
)
class More extends Component {

  // state = {
  //   checked: false
  // };

  // handleChange = () => {
  //   this.setState(prevState => ({checked: !this.state.checked}))
  // } 

  render() {
    return (
      <TitleBar>
        <NavBar
          mode="dark"
        >更多</NavBar>
        <MoreWrap>
          <span>显示地图：</span>
          <Switch
            checked={this.props.checked}
            onChange={this.props.handleChange}
            />
        </MoreWrap>
      </TitleBar>
    )
  }
}
*/

const More = () => {
  // const checked = useSelector(state => state.home.checked)
  const checked = useSelector(state => state.getIn(['home', 'checked']))
  const dispatch = useDispatch()

  const handleChange = useCallback((checked)=>{
    dispatch(actionCreator.changeSwitch(checked))
    // 本地存储：将checked存起来
    localStorage.setItem('checked', checked)
  }, [])

  return (
    <TitleBar>
      <NavBar
        mode="dark"
      >更多</NavBar>
      <MoreWrap>
        <span>显示地图：</span>
        <Switch
          checked={checked}
          onChange={handleChange}
          />
      </MoreWrap>
    </TitleBar>
  )
}

export default More